<template>
    <div class="photo-player">
        <ul class="photo-player-lists">
            <li v-for="(value, key) in bannerList" :key="key"><img :src="value" /></li>
        </ul>
        <!-- <ul class="photo-player-button">
            <li v-for="(value, key) in bannerList" :class="['white', {'active': key == index}]" @click="index = key" :key="key"></li>
        </ul> -->
    </div>
</template>

<script>
export default {
    data(){
        return {
            index: 0
        }
    },
    props: ["bannerList"],
    methods: {
        change(){
            let that = this;
            let len = this.bannerList.length;
            setInterval(function(){
                that.index++;
                if(that.index == len){
                    that.index = 0;
                }

            }, 1000*5);
        }
    },
    mounted(){
        this.change();
    }
}
</script>

<style scoped>
html, body{
    margin: 0;
    padding: 0;
}
.photo-player{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}
.photo-player-lists{
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: inherit;
    height: inherit;
}
.photo-player-lists li{
    list-style-type: none;
    width: inherit;
    height: inherit;
}
.photo-player-lists li img{
    width: 100%;
    height: 100%;
}
/* .photo-player-button{
    position: absolute;
    margin: 0;
    padding: 0;
    bottom: 30px;
    left: 198px;
    list-style-type: none;
}
.photo-player-button li{
    list-style-type: none;
    width: 10px;
    height: 10px;
    margin-left: 5px;
    margin-right: 5px;
    border-radius: 6px;
    float: left;
    cursor: pointer;
}
.white{
    background: #ffffff;
}
.active{
    background: #0000ff;
} */
</style>